<template>
  <div class="box">
    <div id="" style="margin-bottom: 20px">
      <el-button
        :type="type == 'Rest定义' ? 'primary' : ''"
        v-has
        @click="type = 'Rest定义'"
        >Rest定义</el-button
      >
      <el-button
        :type="type == 'Rest测试' ? 'primary' : ''"
        v-has
        @click="type = 'Rest测试'"
        >Rest测试</el-button
      >
      <el-button
        :type="type == '文件导出定义' ? 'primary' : ''"
        v-has
        @click="type = '文件导出定义'"
        >文件导出定义</el-button
      >
      <el-button
        :type="type == '文件导出测试' ? 'primary' : ''"
        v-has
        @click="type = '文件导出测试'"
        >文件导出测试</el-button
      >
      <el-button
        :type="type == '数据推送定义' ? 'primary' : ''"
        v-has
        @click="type = '数据推送定义'"
        >数据推送定义</el-button
      >
      <el-button
        :type="type == '数据推送测试' ? 'primary' : ''"
        v-has
        @click="type = '数据推送测试'"
        >数据推送测试</el-button
      >
      <el-button
        :type="type == '扩展过滤器定义' ? 'primary' : ''"
        v-has
        @click="type = '扩展过滤器定义'"
        >扩展过滤器定义</el-button
      >
    </div>
    <!-- <template v-if="type=='数据导入'">
      <el-form ref="ruleForm" :model="formData" :inline="true" class="form" label-position="left" label-width="150px">
        <el-form-item label="文档地址:">
          <el-upload ref="uploads" class="upload-demo" drag accept=".xls,.xlsx" :auto-upload="false"
            :action="uploadFile" :headers="headers" :file-list="fileList" multiple>
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
    </template> -->
    <div v-if="type == '文件导出定义'" style="margin-bottom: 20px">
      <el-button type="primary" size="medium" @click="importVisible = true"
        >导出定义</el-button
      >
    </div>
    <template v-if="type == 'Rest定义'">
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead1"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper'">
              {{ scope.row[item.title] }}
            </div>
            <!--   <div v-else>
              <el-button type="primary" size="mini">操作</el-button>
            </div> -->
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type == 'Rest测试'">
      <el-table :data="tableData2" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead2"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper'">
              {{ scope.row[item.title] }}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="Visible = true"
                >测试</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type == '文件导出定义'">
      <el-table :data="tableData3" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead3"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper3'">
              {{ scope.row[item.title] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type == '文件导出测试'">
      <el-table :data="tableData4" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead4"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper4'">
              {{ scope.row[item.title] }}
            </div>
            <div v-else>
              <el-button
                type="primary"
                size="mini"
                @click="importFile(scope.row)"
                >导出测试</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type == '数据推送定义'">
      <el-table :data="tableData5" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead5"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <!-- <template v-slot="scope">
          <div v-if="item.title!='oper5'">
            {{scope.row[item.title]}}
          </div>
          <div v-else>
            <el-button type="primary" size="mini">推送定义</el-button>
          </div>
          </template> -->
        </el-table-column>
      </el-table>
    </template>
    <div style="width: 1200px" v-if="type == '数据推送测试'">
      <el-table :data="tableData6" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead6"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper6'">
              {{ scope.row[item.title] }}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="checkVisible = true"
                >测试推送</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-if="type == '扩展过滤器定义'">
      <el-table :data="tableData7" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead7"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
          <template v-slot="scope">
            <div v-if="item.title != 'oper'">
              {{ scope.row[item.title] }}
            </div>
            <!--            <div v-else>
              <el-button type="primary" size="mini">过滤</el-button>
            </div> -->
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog title="测试结果" :visible.sync="Visible" width="60%">
      <el-table :data="tableData8" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead8"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="导出格式自定义" :visible.sync="importVisible" width="30%">
      <div
        style="
          display: flex;
          flex-direction: column;
          height: 200px;
          justify-content: space-around;
        "
      >
        <el-radio v-model="radio" label="1">DBase文件(*.dbf)</el-radio>
        <el-radio v-model="radio" label="2">文本文件(*.txt)</el-radio>
        <el-radio v-model="radio" label="3">CSV文件(*.CSV)</el-radio>
        <el-radio v-model="radio" label="4">HTML文件(*.html)</el-radio>
        <el-radio v-model="radio" label="5">Excel数据表(*.xls)</el-radio>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importVisible = false">取 消</el-button>
          <el-button type="primary" @click="importVisible = false"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
    <el-dialog
      title="数据推送测试"
      :visible.sync="checkVisible"
      width="60%"
      height="500px"
    >
      <div style="width: 100%; height: 200px">
        <div
          style="
            width: 100%;
            border-bottom: 1px solid gray;
            font-size: 25px;
            font-weight: 800;
          "
        >
          执行结果
        </div>
        <div class="rule">Lnitialize a step - 数据规则 :5ms</div>
        <div class="time">Lnitialize a step - 定时推送服务 : 5ms</div>
        <div class="time">Lnitialize a step - restApi : 4ms</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      radio: "",
      ruleForm: {},
      formData: {},
      ruleForm1: {},
      formData1: {},
      ruleForm2: {},
      formData2: {},
      fileList: [],
      importVisible: false,
      checkVisible: false,
      type: "数据导入",
      tableHead1: [
        {
          id: 1,
          label: "步骤名称",
          title: "stepName",
        },
        {
          id: 2,
          label: "代码片段",
          title: "code",
        },
        {
          id: 3,
          label: "字段",
          title: "field",
        },
        {
          id: 3,
          label: "参数",
          title: "args",
        },
      ],
      tableData1: [
        {
          stepName: "restApi",
          code: "public class Api{}",
          field: "name",
          args: "无",
          oper: "按钮",
        },
      ],

      formData: {},

      tableHead2: [
        {
          id: 1,
          label: "步骤名称",
          title: "stepName",
        },
        {
          id: 2,
          label: "代码片段",
          title: "code",
        },
        {
          id: 3,
          label: "字段",
          title: "field",
        },
        {
          id: 3,
          label: "参数",
          title: "args",
        },
        {
          id: 4,
          label: "操作",
          title: "oper",
        },
      ],
      tableData2: [
        {
          stepName: "restApi",
          code: "public class Api{}",
          field: "name",
          args: "无",
          oper1: "测试",
        },
      ],

      tableData3: [
        {
          id: "1",
          name: "王鑫",
          sex: "男",
          age: "21",
        },
      ],
      tableHead3: [
        {
          id: 1,
          label: "编号",
          title: "id",
        },
        {
          id: 2,
          label: "姓名",
          title: "name",
        },
        {
          id: 3,
          label: "性别",
          title: "sex",
        },
        {
          id: 4,
          label: "年龄",
          title: "age",
        },
      ],

      tableHead4: [
        {
          id: 1,
          label: "表名",
          title: "tableName",
        },
        {
          id: 2,
          label: "导出到",
          title: "exportDr",
        },
        {
          id: 3,
          label: "操作",
          title: "oper4",
        },
      ],
      tableData4: [
        {
          tableName: "pr_student",
          exportDr: "当前目录",
          oper4: "导出测试",
        },
        {
          tableName: "doc",
          exportDr: "D:downLoad",
          oper4: "导出测试",
        },
      ],

      tableHead5: [
        {
          id: 1,
          label: "代理关键字段",
          title: "keyField",
        },
        {
          id: 2,
          label: "是否使用自增字段",
          title: "isAutoInc",
        },
        {
          id: 3,
          label: "Version字段",
          title: "version",
        },
        {
          id: 4,
          label: "Stream日期字段",
          title: "createTime",
        },
        {
          id: 5,
          label: "开始日期",
          title: "startTime",
        },
        {
          id: 6,
          label: "截止日期",
          title: "endTime",
        },
        {
          id: 7,
          label: "操作",
          title: "oper5",
        },
      ],
      tableData5: [
        {
          keyField: "sys_name",
          isAutoInc: "是",
          version: "version",
          createTime: "create_time",
          startTime: "date_from",
          endTime: "date_to",
          oper5: "",
        },
      ],

      tableHead6: [
        {
          id: 1,
          label: "代理关键字段",
          title: "keyField",
        },
        {
          id: 2,
          label: "是否使用自增字段",
          title: "isAutoInc",
        },
        {
          id: 3,
          label: "Version字段",
          title: "version",
        },
        {
          id: 4,
          label: "Stream日期字段",
          title: "createTime",
        },
        {
          id: 5,
          label: "开始日期",
          title: "startTime",
        },
        {
          id: 6,
          label: "截止日期",
          title: "endTime",
        },
        {
          id: 7,
          label: "操作",
          title: "oper6",
        },
      ],
      tableData6: [
        {
          keyField: "sys_name",
          isAutoInc: "是",
          version: "version",
          createTime: "create_time",
          startTime: "date_from",
          endTime: "date_to",
          oper6: "测试推送",
        },
      ],

      tableHead7: [
        {
          id: 1,
          label: "使用sequence",
          title: "sequence",
        },
        {
          id: 2,
          label: "使用自增字段",
          title: "autoInc",
        },
        {
          id: 3,
          label: "Version字段",
          title: "version",
        },
        {
          id: 5,
          label: "日期字段",
          title: "date",
        },
      ],
      tableData7: [
        {
          sequence: "使用",
          autoInc: "使用",
          version: "版本1.0",
          date: "create_time",
        },
      ],
      Visible: false,
      tableHead8: [
        {
          id: 1,
          label: "步骤名称",
          title: "stepName",
        },
        {
          id: 2,
          label: "复制的记录行数",
          title: "numberRecords",
        },
        {
          id: 3,
          label: "读",
          title: "read",
        },
        {
          id: 3,
          label: "写",
          title: "write",
        },
        {
          id: 4,
          label: "输入",
          title: "enter",
        },
        {
          id: 5,
          label: "输出",
          title: "Output",
        },
        {
          id: 6,
          label: "更新",
          title: "update",
        },
        {
          id: 7,
          label: "拒绝",
          title: "reject",
        },
        {
          id: 8,
          label: "错误",
          title: "error",
        },
        {
          id: 9,
          label: "激活",
          title: "activation",
        },
        {
          id: 10,
          label: "时间",
          title: "time",
        },
      ],
      tableData8: [
        {
          stepName: "restApi",
          numberRecords: 0,
          read: 0,
          write: 0,
          enter: 0,
          Output: 0,
          update: 0,
          reject: 0,
          error: 1,
          activation: "已停止",
          time: "0.1s",
        },
      ],
    };
  },
  computed: {
    uploadFile() {
      return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
    },
    headers() {
      const head = {
        token: this.$store.getters.token,
      };
      return head;
    },
  },
  methods: {
    submitForm() {
      this.$message({
        type: "success",
        message: "上传目录成功",
      });
    },
    resetForm() {},
    importFile(item) {
      console.log(item);
      const a = document.createElement("a");
      const url =
        process.env.VUE_APP_BASE_API + "/dc/export?token=" + getToken();
      a.href = url;
      a.download = "filename";
      a.click();
      window.URL.revokeObjectURL(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 30px;
}

.rule {
  border: 1px solid gray;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(to right, #94d4fb, #d9f0fe);
  font-size: 20px;
}

.time {
  width: 65%;
  float: right;
  border: 1px solid gray;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(to right, #94d4fb, #d9f0fe);
  font-size: 20px;
  margin-top: 10px;
}
</style>
